<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-24 22:15:42
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-25 22:11:10
 * @FilePath: \shangyitong\src\pages\hospital\register\register_step1.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="wrap">
		<!-- 顶部结构 -->
		<div class="top">
			<div class="hosname">{{ baseMap.hosname }}</div>
			<div class="line"></div>
			<div>专科</div>
			<div class="dot">.</div>
			<div class="hosdeparment">{{ baseMap.depname }}</div>
		</div>
		<!-- 中间展示日期结构 -->
		<div class="center">
			<h1 class="time">{{ baseMap.workDateString }}</h1>
			<div class="container">
				<div
					class="item"
					:class="{
						desabled:
							item.status == -1 ||
							(item.status == 0 && item.availableNumber == -1),
                            active:item.workDate==workTime.workDate
					}"
					v-for="(item, index) in hospitalWorkData"
					:key="index"
					@click="selectDoctorDate(item)"
				>
					<div class="item_top">
						{{ item.workDate }}-{{ item.dayOfWeek }}
					</div>
					<div class="item_bottom" v-if="item.status == -1">
						停止挂号
					</div>
					<div class="item_bottom" v-if="item.status == 0">
						<div v-if="item.availableNumber == -1">约满</div>
						<div v-else>有号({{ item.availableNumber }})</div>
					</div>
					<div class="item_bottom" v-if="item.status == 1">
						即将放号
					</div>
				</div>
			</div>
			<el-pagination
				v-model:current-page="pageInfo.pageNo"
				layout="prev, pager, next"
				:total="pageInfo.total"
				@current-change="handleCurrentChange"
			/>
		</div>
		<!-- 底部展示医生结构 -->
		<div class="bottom">
			<!-- 展示即将放号的时间 -->
			<div class="will" v-if="workTime.status==1">
				<span class="time">202年6月3日8:30</span>
				<span class="willText">放号</span>
			</div>
            <!-- 医生的排班信息 -->
			<div class="doctor" v-else>
				<div class="morning">
					<div class="tip">
						<svg
							t="1750820914279"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="12584"
							width="32"
							height="32"
						>
							<path
								d="M512 874.6752c17.664 0 32 14.336 32 32v64a32 32 0 0 1-64 0v-64c0-17.664 14.336-32 32-32z m-256.4352-106.24a32 32 0 0 1 0 45.2608l-45.2608 45.2608a32 32 0 0 1-45.2608-45.2352l45.2352-45.2864a32 32 0 0 1 45.2608 0h0.0256z m558.1312 0l45.2608 45.2608a32 32 0 0 1-45.2352 45.2608l-45.2864-45.2352a32 32 0 1 1 45.2608-45.2864zM512 213.3248c164.9408 0 298.6752 133.7344 298.6752 298.6752S676.9408 810.6752 512 810.6752 213.3248 676.9408 213.3248 512 347.0592 213.3248 512 213.3248zM117.3248 480a32 32 0 0 1 0 64h-64a32 32 0 0 1 0-64h64z m853.3504 0a32 32 0 0 1 0 64h-64a32 32 0 1 1 0-64h64zM210.304 165.0432l45.2608 45.2352a32 32 0 1 1-45.2608 45.2608L165.0432 210.3296a32 32 0 0 1 45.2352-45.2608h0.0256z m648.6528 0a32 32 0 0 1 0 45.2352l-45.2352 45.2608a32 32 0 0 1-45.2864-45.2352l45.2608-45.2608a32 32 0 0 1 45.2608 0zM512 21.3248c17.664 0 32 14.336 32 32v64a32 32 0 0 1-64 0v-64c0-17.664 14.336-32 32-32z"
								fill="#FC8628"
								p-id="12585"
							></path>
						</svg>
						<span class="text">上午号源</span>
					</div>
					<!-- 展示医生的名字和技能 -->
					<div class="doc_Info"   v-for="doctor in morningArr" :key="doctor.id">
						<div class="left">
							<div class="info">
								<span>{{doctor.title}}</span>
								<span>|</span>
								<span>{{doctor.docname}}</span>
							</div>
							<div class="skill">
								{{ doctor.ski11 }}
							</div>
						</div>
						<!-- 右侧展示区域展示挂号的钱数 -->
						<div class="right">
							<div class="money">￥{{ doctor.amount }}</div>
							<div>
								<el-button type="primary" size="default" @click="goStep2(doctor)"
									>剩余{{ doctor.availableNumber }}</el-button
								>
							</div>
						</div>
					</div>
                    <!-- <div class="doc_Info">
						<div class="left">
							<div class="info">
								<span>副主任医师</span>
								<span>|</span>
								<span>张三</span>
							</div>
							<div class="skill">
								XXXXXXXXXXXXXXXXXXXXXXXXXX 技能
							</div>
						</div> -->
						<!-- 右侧展示区域展示挂号的钱数 -->
						<!-- <div class="right">
							<div class="money">￥100</div>
							<div>
								<el-button type="primary" size="default"
									>100</el-button
								>
							</div>
						</div>
					</div> -->
				</div>
				<div class="affter">
					<div class="tip">
						<svg
							t="1750818959434"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="8997"
							width="32"
							height="32"
						>
							<path
								d="M604.16 62.902857c38.034286 65.828571 59.977143 141.897143 59.977143 223.817143 0 248.685714-201.874286 450.56-450.56 450.56-33.645714 0-67.291429-4.388571-98.011429-11.702857C190.171429 892.342857 355.474286 1007.908571 550.034286 1007.908571 811.885714 1007.908571 1024 795.794286 1024 533.942857 1024 291.108571 841.142857 90.697143 604.16 62.902857z m0 0"
								fill="#FFCE60"
								p-id="8998"
							></path>
							<path
								d="M323.291429 408.137143l-20.48 58.514286-58.514286 20.48 58.514286 19.017142 20.48 59.977143 19.017142-59.977143 59.977143-19.017142-59.977143-20.48zM111.177143 16.091429L83.382857 99.474286 0 127.268571l83.382857 27.794286 27.794286 83.382857 27.794286-83.382857 84.845714-27.794286-84.845714-27.794285z"
								fill="#FFCE60"
								p-id="8999"
							></path>
						</svg>
						<span class="text">下午号源</span>
					</div>
					<div class="doc_Info" v-for="doctor in affterArr" :key="doctor.id">
						<div class="left">
							<div class="info">
								<span>{{ doctor.title }}</span>
								<span>|</span>
								<span>{{ doctor.docname }}</span>
							</div>
							<div class="skill">
								{{ doctor.ski11 }}
							</div>
						</div>
						<!-- 右侧展示区域展示挂号的钱数 -->
						<div class="right">
							<div class="money">￥{{ doctor.amount }}</div>
							<div>
								<el-button type="primary" size="default" @click="goStep2(doctor)"
									>剩余{{ doctor.availableNumber }}</el-button
								>
							</div>
						</div>
					</div>
                    <!-- 模拟数据后面将要注释 -->
					<div class="doc_Info">
						<div class="left">
							<div class="info">
								<span>副主任医师</span>
								<span>|</span>
								<span>张三</span>
							</div>
							<div class="skill">
								XXXXXXXXXXXXXXXXXXXXXXXXXX 技能
							</div>
						</div>
						<!-- 右侧展示区域展示挂号的钱数 -->
						<div class="right">
							<div class="money">￥100</div>
							<div>
								<el-button type="primary" size="default"  @click="goStep2(doctor)"
									>100</el-button
								>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref ,computed} from 'vue'
import { useRoute,useRouter } from 'vue-router'
import { reqHospitalWork, reqHospitalDoctor } from '@/api/hospital/index'
import type {
	HospitalWorkDataResponse,
	BaseMap,
	BookingScheduleList,
    DoctorResponseData,
    DocArr,
    Doctor
} from '@/api/hospital/type'
let $route = useRoute()
let $router = useRouter()
//定义分页数据
const pageInfo = ref({
	pageNo: 1,
	limit: 6,
	total: 0,
})
//定义医院预约挂号详情数据
let baseMap = ref<BaseMap>({
	hosname: '',
	depname: '',
	workDateString: '',
	releaseTime: '',
	bigname: '',
	stopTime: '',
})

//定义医院预约挂号数组
let hospitalWorkData = ref<BookingScheduleList>([])
//存储排班日期,当前排班数据的第一个
let workTime: any = ref({})
//存储医生排班的数据
let docArr = ref<DocArr>([])
//分页器事件回调
const handleCurrentChange = (value: number) => {
	pageInfo.value.pageNo = value
	getHospitalWork()
}
const getHospitalWork = async () => {
	let result: HospitalWorkDataResponse = await reqHospitalWork(
		pageInfo.value.pageNo,
		pageInfo.value.limit,
		$route.query.hoscode as string,
		$route.query.depcode as string
	)
	if (result.code == 200) {
		baseMap.value = result.data.baseMap
		hospitalWorkData.value = result.data.bookingScheduleList.map((item) => {
			let year = item.workDate.split('-')[0]
			item.workDateMd = year + '年' + item.workDateMd
			return {
				...item,
			}
		})
		pageInfo.value.total = result.data.total
		//存储第一天的数据日期的数据
		workTime.value = hospitalWorkData.value[0]
		selectDoctorDate(workTime.value,)
	}
}
//选中医生的排班事件回调(默认是第一天的数据)$index=0
const selectDoctorDate = async (item: any) => {
    workTime.value = item
	// console.log("first",item)
	let workDate: any = item.workDate
	//  let workDate:any = "2021-06-03"
	let hoscode = $route.query.hoscode //医院编号
	let depcode = $route.query.depcode //科室编号
	let result:DoctorResponseData = await reqHospitalDoctor(
		hoscode as string,
		depcode as string,
		workDate
	)
	if (result.code == 200) {
        docArr.value = result.data
	}
}
//计算出上午医生排班的数据
let morningArr = computed(()=>{
    return docArr.value.filter((doc:Doctor)=>{
        doc.workTime==0
    })
})
//计算出下午医生排班的数据
let affterArr = computed(()=>{
    return docArr.value.filter((doc:Doctor)=>{
        doc.workTime==1
    })
})
const goStep2 =(doctor:Doctor)=>{
    $router.push({
        path:"/hospital/register_step2",
        query:{
            docId:doctor?.id||'6225753136a9ba1be763dc10'
            
        }
    })
}
onMounted(() => {
	getHospitalWork()
})
</script>

<style lang="scss" scoped>
.wrap {
	.top {
		display: flex;
		color: #7f7f7f;
		.line {
			width: 3px;
			height: 18px;
			background-color: #7f7f7f;
			margin: 0 5px;
		}
		.dot {
			margin: 0 5px;
			color: skyblue;
		}
	}
	.center {
		margin: 20px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		.time {
			font-weight: 900;
		}
		.container {
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin: 30px 0;
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;
				border: 1px solid #8fb1d7;
				margin: 0 5px;
                transition: 0.5s;
				&.desabled {
					border: 1px solid #7f7f7f;
					.item_top {
						background-color: #cdcdcd;
					}
				}
                &.active{
                    transform: scale(1.1);
                }
				.item_top {
					width: 100%;
					height: 30px;
					line-height: 30px;
					text-align: center;
					background-color: #eaf6ff;
				}
				.item_bottom {
					width: 100%;
					height: 60px;
					line-height: 60px;
					text-align: center;
				}
			}
		}
	}
	.bottom {
		.will {
			font-weight: 900;
			text-align: center;
			font-size: 30px;
			.time {
				color: red;
			}
			.willText {
				color: #7f7f7f;
			}
		}
		.doctor {
			.morning,
			.affter {
				.tip {
					display: flex;
					align-items: center;
					.text {
						color: #7f7f7f;
						font-weight: 900;
						margin: 0 5px;
					}
				}
				.doc_Info {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 10px 0;
					border-bottom: 1px solid #ccc;
					.left {
						.info {
							margin: 5px;
							font-weight: 900;
							color: #aad6ec;
							font-size: 20px;
							span {
								margin: 5px;
							}
						}
						.skill {
							margin: 10px;
							color: #7f7f7f;
						}
					}
					.right {
						width: 130px;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.money {
							font-weight: 900;
							color: #7f7f7f;
						}
					}
				}
			}
		}
	}
}
</style>
